import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Calendar, Badge ,Input,DatePicker ,Checkbox ,Button,message,Tabs ,Icon,Select} from 'antd';
import styles from './index.less';
const Option = Select.Option;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const TabPane = Tabs.TabPane;
const Pages = ({ duty, dispatch, loading }) => {


    //月管理
    function dateCellRender (value) {
        //value.format('MM') == new Date().format('MM')
        return duty.getDutyMMData && duty.getDutyMMData.map((item,index)=>{
            let time =item.start_time &&item.start_time.split(" ")[0].split("-")[2];
            let MM = item.start_time && item.start_time.split(" ")[0].split("-")[1];
            if(value.date() == time && MM == value.format('MM')){
                return (
                    <ul key={index} className={styles.events}>
                        {
                            item.titles.map((i,index) => (
                                <li key={index}>
                                    <Badge status='warning' text={i} />
                                </li>
                            ))
                        }
                    </ul>
                );
            }
        });
    }
    //年管理
    function monthCellRender (value) {
        let data = duty.getDutyYYData;
        return data && data.map((item,index) =>{
            let MM = item.time.split('-')[1];
            let YY = item.time.split('-')[0];
            if(value.month() == MM && value.year() == YY){
                return <div key={index}>
                    <section>{item.num}个</section>
                    <span>当月任务</span>
                </div>;
            }
        });
    }

    return(
        <div className={styles.container}>
            {duty.view?<Tabs onChange={()=>{}} type="card">
                <TabPane tab="+添加日历" key="9999">
                    <PagesPOST dispatch={dispatch} {...duty} loading={loading.global}/>
                </TabPane>
                {
                    duty.getDutyListData && duty.getDutyListData.map((item,index)=>{
                        return <TabPane key={index} tab={item.name} >
                            <PagesPOSTED dispatch={dispatch} {...item} loading={loading.global}/>
                        </TabPane>;
                    })
                }
            </Tabs>:
                <Calendar dateCellRender={dateCellRender}
                    onPanelChange={value=>{
                        dispatch({type:'duty/getDutyMM',payload:{date: value.format('YYYY-MM-DD HH:mm:ss')}});
                        // dispatch({type:'duty/getDutyYY',payload:{timeDate: value.format('YYYY-MM-DD HH:mm:ss')}});
                    }}
                    onSelect={(value)=>{
                        dispatch({type:"duty/getDutyList",payload:{timeStart:value,timeDate:value.format('YYYY-MM-DD HH:mm:ss')}});
                    }}
                    monthCellRender={monthCellRender} />}
        </div>
    );
};

class PagesPOST extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            checkedDD: false,
            checkedFF:false,
            timeEnd:'',
            locad:'',
            popIt:'',
            content:'',
        };
    }

    render (){

        let{timeStart,dispatch,TXL,loading} = this.props;
        return(
            <div style={{padding:20 }}>
                <h2><span style={{color:'red'}}>*</span>标题</h2>
                <Input onChange={e=>{
                    this.setState({
                        title:e.target.value,
                    });
                }} placeholder="请输入新的日程安排标题" />
                <div>
                    <span><span style={{color:'red'}}>*</span>起始时间</span>
                    <DatePicker value={timeStart} style={{margin:10}} disabled />
                </div>
                <div>
                    <span><span style={{color:'red'}}>*</span>结束时间</span>
                    <DatePicker style={{margin:10}} onChange={(date, dateString)=>{
                        this.setState({
                            timeEnd:dateString,
                        });
                        console.log(date, dateString);
                    }} />
                </div>
                <Checkbox style={{margin:10}} onChange={e=>{
                    this.setState({
                        checkedDD:e.target.checked,
                    });
                }}>全天</Checkbox>
                <Checkbox style={{margin:10}} onChange={e=>{
                    this.setState({
                        checkedFF:e.target.checked,
                    });
                }}>重复</Checkbox>
                <br/>
                <div style={{marginTop:10}}><span style={{color:'red'}}>*</span>参与人员:</div>
                <Select placeholder="请选择" style={{marginTop:10,width:256}} onChange={value=>{
                    this.setState({
                        popIt:value,
                    });
                }}>
                    {
                        TXL.map((item,index)=>{
                            return <Option key={index} value={item.id}>{item.name}</Option>;
                        })
                    }
                </Select>
                {/* <Input onChange={e=>{

                }} style={{marginTop:10}} /> */}
                <div style={{marginTop:10}}><span style={{color:'red'}}>*</span>地点:</div>
                <Input onChange={e=>{
                    this.setState({
                        locad:e.target.value,
                    });
                }} style={{marginTop:10}}/>
                <div style={{marginTop:10}}><span style={{color:'red'}}>*</span>日程详情:</div>
                <Input.TextArea onChange={e=>{
                    this.setState({
                        content:e.target.value,
                    });
                }} style={{marginTop:10}} />
                <div style={{width:'100%',textAlign:'center',margin:20}}>
                    <Button style={{margin:10}} onClick={()=>{
                        dispatch({type:"duty/inputOut",payload:{view:false}});
                    }}><Icon type="logout" />返回</Button>
                    <Button loading={loading} type="primary" onClick={()=>{
                        let {checkedDD,checkedFF, timeEnd,locad,popIt,content,title} =this.state;
                        console.log(222,timeEnd);
                        if( timeEnd && locad && popIt && content && title){
                            dispatch({type:'duty/postDuty',payload:{
                                // checkedDD:checkedDD,
                                remindType:checkedFF?1:0,
                                startTime:timeStart.format('YYYY-MM-DD HH:mm:ss'),
                                endTime:timeEnd+' 00:00:00',
                                scheduleAddress:locad,
                                participant:popIt,
                                scheduleName:title,
                                scheduleDetail:content,
                            }});
                        }else{
                            message.error('项目未填写完整！');
                        }

                    }}>保存</Button></div>
            </div>
        );
    }
}


class PagesPOSTED extends React.Component {

    render (){

        let{timeStart,time,title,pop,loca,content,dispatch} = this.props;
        return(
            <div style={{padding:20 }}>
                <h2><span style={{color:'red'}}>*</span>标题</h2>
                <Input value={title} disabled/>
                <div>
                    <span><span style={{color:'red'}}>*</span>起始时间</span>
                    <DatePicker value={timeStart} style={{margin:10}} disabled />
                </div>
                <div>
                    <span><span style={{color:'red'}}>*</span>结束时间</span>
                    <Input value={time} style={{margin:10}} disabled/>
                </div>
                <Checkbox style={{margin:10}} disabled>全天</Checkbox>
                <Checkbox style={{margin:10}} disabled>重复</Checkbox>
                <br/>
                <div style={{marginTop:10}}><span style={{color:'red'}}>*</span>参与人员:</div>
                <Input value={pop} style={{marginTop:10}} disabled/>
                <div style={{marginTop:10}}><span style={{color:'red'}}>*</span>地点:</div>
                <Input value={loca} style={{marginTop:10}} disabled/>
                <div style={{marginTop:10}}><span style={{color:'red'}}>*</span>日程详情:</div>
                <Input.TextArea value={content} style={{marginTop:10}} disabled />
                <div style={{width:'100%',textAlign:'center',margin:20}}>
                    <Button style={{margin:10}} onClick={()=>{
                        dispatch({type:"duty/inputOut",payload:{view:false}});
                    }}><Icon type="logout" />返回</Button></div>
            </div>
        );
    }
}

Pages.propTypes = {
    duty: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ duty, loading }) => ({ duty, loading }))(Pages);